<!-- 商品分类 -->
<template>
	<view class="goods-category">
		<block>
			<view style="padding:10rpx;">
				<menu-tabs
					v-model="tabIndex"
					:tabs="tabs"
					v-if="tabs.length > 5"
					:fixed="true"
					:tab-width="142"
					@change="tabBtn"
					nameKey="category_name"
					backColor="transparent"
				></menu-tabs>
				<menu-tabs
					v-model="tabIndex"
					:tabs="tabs"
					nameKey="category_name"
					v-else
					:fixed="false"
					@change="tabBtn"
					backColor="transparent"
				></menu-tabs>
			</view>
		</block>
		<block>
			<goods-waterfall-flow :allList="goodsList" @goodsFlowCall="goodsFlowBtn"></goods-waterfall-flow>
			<view class="cu-load loading" v-if="!throttleType"></view>
			<view class="cu-load over" v-if="totals && categoryObj.page * categoryObj.page_size >= totals"></view>
		</block>
		<view class="goods-category-mask" v-if="maskType"></view>
	</view>
</template>

<script>
import goodsWaterfallFlow from '@/common/components/global/goods-waterfall-flow.vue'
export default {
	name: 'GoodsCategory',
	data() {
		return {
			tabIndex: 0,
			tabs: [],
			maskType: true,
			categoryObj: {
				page: 1,
				page_size: 10,
				category_id: null,
				category_level: 1
			},
			totals: 0,
			goodsList: [],
			throttleType: true
		}
	},
	components: {
		goodsWaterfallFlow
	},
	props: {
		lower: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		lower: {
			// 每个属性值发生变化就会调用这个函数
			handler(newVal, oldVal) {
				if (oldVal && this.throttleType && this.totals && this.totals > this.categoryObj.page * this.categoryObj.page_size) {
					console.log('可以加载分页')
					this.categoryObj.page++
					this.getGoodsList()
				}
			},
			// 立即处理 进入页面就触发
			immediate: true,
			// 深度监听 属性的变化
			deep: true
		}
	},
	methods: {
		// 点击tab栏
		tabBtn(val) {
			this.tabIndex = val
			this.categoryObj = {
				page: 1,
				page_size: 10,
				category_level: 1,
				category_id: this.tabs[val].category_id
			}
			this.goodsList = []
			if (this.categoryObj.category_id) {
				this.maskType = true
				this.throttleType = false
				this.getGoodsList()
			}
		},
		// 获取商品数据
		getGoodsList(val) {
			this.$Apis
				.getGoodsSku(this.categoryObj)
				.then(res => {
					this.totals = res.count
					this.goodsList = this.goodsList.concat(res.list)
					this.maskType = false
					this.throttleType = true
				})
				.catch(e => {
					this.maskType = false
					this.throttleType = true
				})
		},
		// 商品点击回调
		goodsFlowBtn(item) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: item.sku_id,
					is_id: item.sku_id,
					type: 1
				}
			})
		}
		// 轮播图切换
		// categoryChange(v) {
		// 	let idx = v.detail.current;
		// 	this.tabIndex = idx;
		// 	console.log('categoryChange', this.tabs[idx]);
		// 	let newObj = this.tabs[idx];
		// 	if (newObj) {
		// 		this.maskType = true;
		// 		this.getGoodsList(newObj);
		// 	}
		// },
	},
	mounted() {
		this.$Apis.getGoodscategoryTree({ level: 1 }).then(res => {
			if (res.length > 0) {
				this.tabs = res
				this.categoryObj.category_id = res[0].category_id
				this.getGoodsList()
			}
		})
	}
}
</script>

<style lang="scss">
.goods-category {
	position: relative;
	padding: 0 20rpx;
	.swiper-box {
		height: 0;
		min-height: 150px;
	}
	.goods-category-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
}
</style>
